import React, { useEffect } from 'react';
import { Col, Drawer, Select, Form, Input, Divider, Row, Cascader } from 'antd';
import { useIntl } from 'umi';
import * as publicData from '../../utils/staticData';
import style from './index.less';

const CheckCustomerAccount: React.FC = (props: any) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const { checkOpen, showCheckDrawer, onCheckClose } = props;
  const [form] = Form.useForm();

  const { Option } = Select;
  const { SHOW_CHILD } = Cascader;

  // 远程搜索地区银行识别码
  const options = [
    {
      value: '0011',
      label: '国库',
    },
    {
      value: '003',
      label: '渣打银行（香港）有限公司',
    },
    {
      value: '004',
      label: '香港上海汇丰银行有限公司',
    },
    {
      value: '005',
      label: '东方汇理银行',
    },
    {
      value: '006',
      label: '东方汇理银行',
    },
    {
      value: '007',
      label: '东方汇理银行',
    },
    {
      value: '008',
      label: '东方汇理银行',
    },
  ];
  // 回显开关
  //   let flag = _.isEmpty(echoData);

  const testDATA = {
    largeAmount: '1321321',
    CardType: '1',
    Identification: ['0011'],
    accountCountry: 'jack',
    city: ['110000', '110000'],
    currency: 'HKD',
    detailAddress: '211221221',
    name: '12',
    swiftcode: '21321',
    transferAmount: '232132',
    type: 'private',
    url: '13213',
  };
  // 数据回显;
  useEffect(() => {
    // if (!flag) {
    form.setFieldsValue({
      ...testDATA,
    });
    // }
  });

  return (
    <Drawer
      title={t('buttons.Return')}
      // title="返回"
      width={'100%'}
      height={'100%'}
      //   width={"100%"}
      //   closable={false}
      onClose={() => {
        onCheckClose(false);
        // form.resetFields();
      }}
      placement="top"
      open={checkOpen}
      //   style={{ paddingTop: "0px" }}
      className={style.accountdrawer}
      bodyStyle={{
        paddingBottom: 80,
      }}
    >
      <Divider orientation="left" orientationMargin="-5px">
        {/* 基本信息 */}
        {t('form.essentialinformation')}
      </Divider>
      <Form form={form} className={style.accountform} labelAlign={'right'}>
        <Row gutter={24}>
          <Col span={6}>
            <Form.Item
              name="name"
              // label="账户号"
              label={t('form.AccountNo')}
              rules={[{ required: true }]}
            >
              <Input disabled bordered={false} />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="url"
              // label="账户名称"
              label={t('form.accountTitle')}
              rules={[{ required: true }]}
            >
              <Input
                disabled
                style={{
                  width: '100%',
                }}
                bordered={false}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="Identification"
              // label="地区银行识别码"
              label={t('form.Bankidentificationcode')}
              rules={[{ required: true }]}
            >
              <Cascader
                disabled
                className={style.addcascader}
                bordered={false}
                options={options}
                changeOnSelect
                showCheckedStrategy={SHOW_CHILD}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="type"
              // label="账户类型"
              label={t('form.AccountType')}
              rules={[{ required: true }]}
            >
              <Select disabled bordered={false} showArrow={false}>
                <Option value="private">对私</Option>
                <Option value="public">对公</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={6}>
            <Form.Item
              name="accountCountry"
              // label="账户归属国家"
              label={t('form.BankCountry')}
              rules={[{ required: true }]}
            >
              <Select
                disabled
                // placeholder="请输入归属国家"
                bordered={false}
                showArrow={false}
              >
                <Option value="jack">Jack Ma</Option>
                <Option value="tom">Tom Liu</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="currency"
              // label="账户币种"
              label={t('form.AccountCurrency')}
              rules={[{ required: true }]}
            >
              <Select
                disabled
                // placeholder="请输入选择账户币种"
                bordered={false}
                showArrow={false}
              >
                {publicData.moneyData.map((district) => (
                  <Option key={district.currency}>{district.name}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="city"
              // label="开户银行所在省市"
              label={t('form.Addressdepositbank')}
              rules={[{ required: true }]}
            >
              <Cascader
                className={style.addcascader}
                disabled
                bordered={false}
                options={publicData.cityData}
                // changeOnSelect
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="CardType"
              // label="卡折类型"
              label={t('form.Cardtype')}
              rules={[{ required: true }]}
            >
              <Select disabled bordered={false} showArrow={false}>
                {publicData.CardType.map((district) => (
                  <Option key={district.value}>{district.name}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col span={6}>
            <Form.Item
              name="largeAmount"
              // label="大额支付系统行号"
              label={t('form.LargeamountpaymenbankNo')}
            >
              <Input
                disabled
                bordered={false}
                style={{
                  width: '100%',
                }}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="swiftcode"
              label="SWIFTCODE"
              rules={[{ required: true }]}
            >
              <Input
                disabled
                bordered={false}
                style={{
                  width: '100%',
                }}
              />
            </Form.Item>
          </Col>

          <Col span={6}>
            <Form.Item
              name="transferAmount"
              // label="中转支付行号"
              label={t('form.changetrainsShops')}
            >
              <Input
                disabled
                bordered={false}
                style={{
                  width: '100%',
                }}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              name="detailAddress"
              // label="详细地址"
              label={t('form.SpecificAddress')}
              rules={[{ required: true }]}
            >
              <Input
                disabled
                bordered={false}
                style={{
                  width: '100%',
                }}
                placeholder="请输入详细地址"
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <Divider orientation="left" orientationMargin="-5px">
        {/* 其他信息 */}
        {t('form.Otherinformation')}
      </Divider>
    </Drawer>
  );
};

export default CheckCustomerAccount;
